<template>
  <div id="tmpl">
      <div class="sub">
          <h3>添加评论</h3>
          <p class="line"></p>
          <textarea placeholder="请输入你的评论内容" v-model="content"></textarea>
          <mt-button type="primary" size="large" @click="sub">提交</mt-button>
      </div>
      <div class="comlist">
          <h3>评论列表</h3>
          <p class="line"></p>
          <div class="mui-content" v-for="(item,index) in getlist" :key="index">
                <div class="title">
                    <span>第{{index+1}}楼</span>
                    <span>用户名:{{item.user_name}}</span>
                    <span>发表时间:{{item.add_time | datefmt("YYYY-MM-DD hh:mm:ss")}}</span>
                </div>
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">{{item.content}}</li>
                </ul>
           </div>
           <mt-button type="primary" size="large" @click="getMore">加载更多</mt-button>
      </div>
  </div>
</template>
<script>
import {Toast} from "mint-ui"
    export default{
        data(){
            return{
                content:'',
                getlist:[],
                pageindex:1
            }
        },
        props:["id"],
        created(){
            this.getcommentlist();
        },
        methods:{
            //提交评论
            sub(){
                if(this.content.trim().length<=0){
                    Toast("输入的内容不能为空");
                    return 
                }
                var url=`/api/postcomment/${this.id}`;
                this.$axios.post(url,this.$qs.stringify({content:this.content})).then(res=>{ //这个参数在后面会在url自动追加
                    console.log(res)
                    Toast(res.data.message);
                })
                this.getlist.unshift({
                    user_name:"匿名用户",
                    add_time: new Date(),
                    content: this.content
                })
                this.content='';
            },
            getcommentlist(pageindex=1){ //es6的默认值写法
                var url=`/api/getcomments/${this.id}?pageindex=${pageindex}` //传递参数时:id实际换成参数不用冒号
                this.$axios.get(url).then(res=>{
                    console.log(res);
                     var data=res.data;
                     if(data.status!=0){
                         Toast(data.message);
                         return
                     }
                     this.getlist=this.getlist.concat(data.message); //拼接后才返回新数组，原数组不变
                     //this.getlist.push.apply(this.getlist,data.message)
                })
            },
            getMore(){
                this.pageindex++;
                this.getcommentlist(this.pageindex);
            }
        }
    }
</script>
<style scoped lang="less">
    .sub .line{
        height: 0;
        border-top: 1px solid #ccc;
        margin: 0;
    }
    .title{
				margin: 20px 15px 7px;
				color: #6d6d72;
                font-size: 15px;
                margin:0;
			}
</style>

